<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>组件基础</title>
        <style>
            v-cloak { display: none; }
            .wrapper { border: 1px solid blue ; }
            .content { border: 1px solid gray; margin: 10px; }
            .footer { border: 1px solid green; margin: 10px; }
        </style>
    </head>
    <div>

        <div id="first" v-cloak></div>

        <script src="vue@3.2.45.js" type="text/javascript"></script>

        <script>

            const MainContent = {
                props: {
                    isArray: Boolean,
                    target: [Object, Array],
                    id: Number
                },
                template: `<div class="content">
                              <h3>{{id}}</h3>
                              <div v-if="isArray" v-for="name in target">{{ name }}</div>
                              <div v-if="isArray == false">
                                {{target.id}} , {{target.name}}, {{target.gender}}
                              </div>
                           </div>`,
            }

            const Footer = {
                props: {
                    year: Number,
                    company: String
                },
                template: `<div class="footer">
                              &copy;{{year}} {{company}}
                           </div>`
            }

            // 定义根组件(实际上是定义了根组件的相关选项)
            const App = {
                components: {
                    'main-content': MainContent,
                    // `Footer: Footer` 可以简写为 `Footer`
                    Footer
                },
                template: `<div class="wrapper">
                              <main-content :is-array="isArray" 
                                            :target="['李某芳', '陈某婷', '杨某俊', '芦某迪']" 
                                            :id="first">
                              </main-content>
                              <main-content :is-array="!isArray" 
                                            :target="{ id: 1001, name: '李某芳', gender: '靓妹'}" 
                                            :id="second">
                              </main-content>
                              <Footer v-bind="info"></Footer>
                              <Footer v-bind:year="info.year" v-bind:company="info.company"></Footer>
                           </div>`,
                data() {
                    return {
                        isArray: true,
                        first: 1,
                        second: 2,
                        info: {
                            year: 2022,
                            company: '开发喵'
                        }
                    }
                }
            }
            const app = Vue.createApp(App);
            app.mount( '#first' );
        </script>
    </div>
</html>